<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homePage</title>
    <!-- <link rel="stylesheet" href="./css//homePage.css"> -->
    <link rel="stylesheet" href="../css/reset.css">
</head>


<style>
    .mainBody {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgb(204, 204, 204, 0.8);
        padding: 5px 20px;
    }

    .nav {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30px;
        font-weight: bold;
        /*font-family: '华文隶书';*/



    }

    .logo {
        background: url('../img/logo.jpeg') center no-repeat;
        height: 55px;
        width: 130px;
        background-size: 100% 100%;
    }

    .contentBody {
        width: 100%;
        height: 100%;
        display: flex;
    }

    #cutA{
        color: white;
    }
    .contentBodyLeft {

        flex: 0 0 20%;
        background-color: powderblue;
        padding: 20px;
        color: white;

    }

    iframe {
        flex: 1;
        /* background: blue; */
        border: 1px solid black;
        background-image: url("/img/bg04.webp");
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        margin-right: 10px;
    }

    details {
        padding-left: 10px
    }

    summary {
        list-style: none;
        padding: 5px 0px;
    }

    summary {
        background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.354 2.646A.5.5 0 0 0 4.5 3v6a.5.5 0 0 0 .854.354l3-3a.5.5 0 0 0 0-.708l-3-3z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") 4px center no-repeat;
    }

    details[open]>summary {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.354 5.354A.5.5 0 0 0 9 4.5H3a.5.5 0 0 0-.354.854l3 3a.5.5 0 0 0 .708 0l3-3z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E");
    }

    summary:not(:only-child) {
        background: url("xxx") 4px center no-repeat;
    }

    details[open]>summary:not(:only-child) {
        background-image: url("xxx");
    }

    .tree-item:hover {
        background: aliceblue;
    }

    .tree-item {
        /**/
        padding-left: 410px;
        margin-left: -400px;
    }


    .tree-item::after {
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        height: 38px;
        background: #EEF2FF;
        border-radius: 8px;
        z-index: -1;
        opacity: 0;
        transition: .2s;
    }

    .tree-item:hover::after {
        opacity: 1;
    }

    .tree-item::before {
        content: '';
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        margin-right: 8px;
        background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.833 3.75c0-.92.746-1.667 1.667-1.667h5.417c.247 0 .481.11.64.3l1.833 2.2h7.11c.92 0 1.667.747 1.667 1.667v10c0 .92-.747 1.667-1.667 1.667h-15c-.92 0-1.667-.746-1.667-1.667V3.75zm6.693 0H2.5v4.584h15V6.25H10a.833.833 0 0 1-.64-.3l-1.834-2.2zM17.5 10h-15v6.25h15V10z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E") center no-repeat;
    }

    details[open]>summary:not(:only-child)>.tree-item::before {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.917 2.083c.247 0 .481.11.64.3l1.833 2.2h5.443c.92 0 1.667.747 1.667 1.667v1.667h.833a.833.833 0 0 1 .817.997l-1.666 8.333a.833.833 0 0 1-.817.67H1.677a.814.814 0 0 1-.157-.013.83.83 0 0 1-.687-.82V3.75c0-.92.746-1.667 1.667-1.667h5.417zM10 6.25a.833.833 0 0 1-.64-.3l-1.834-2.2H2.5v6.564l.441-1.766a.833.833 0 0 1 .809-.631h12.083V6.25H10zm-7.266 10L4.4 9.584h12.916l-1.334 6.666H2.733z' fill='%23000' fill-opacity='.45'/%3E%3C/svg%3E");
    }

    a {
        text-decoration: none;
        /* display: inline; */
    }
    .contentBodyLeft span {
        font-size: 18px;
    }
    details :hover{
        background-color: white;
        color: black;
    }

</style>

<body>
    <div class="mainBody">
        <div class="header">
            <div class="logo">

            </div>
            <div class="nav">
                <div>LOVO-DMS</div>
                <div></div>


            </div>
        </div>
    
        <div class="contentBody">
    
            <div class="contentBodyLeft">
                <details>
                    <summary>
                        <span  class="tree-item">宿舍管理系统</span>
                    </summary>
                    <details  id="classBody">
                        <summary>
                            <span class="tree-item">资料管理</span>
                        </summary>
                        <details>
                            <summary>
                                <a class="tree-item" href="/studenthtml/student.html" target="myIframe">学生管理</a>
                            </summary>
                        </details>
                        <details>
                            <summary>
                                <a class="tree-item" href="/studenthtml/class.html" target="myIframe">班级管理</a>
                            </summary>
                        </details>
                    </details>


                    <details id="roomBody">
                        <summary>
                            <span class="tree-item">房间管理</span>
                        </summary>
                        <details>
                            <summary>
                                <a class="tree-item" href="../roomhtml/room.html" target="myIframe">房间信息</a>
                            </summary>
                        </details>
                    </details>
                    <details id="infoBody">
                        <summary>
                            <span class="tree-item">系统管理</span>
                        </summary>
                        <details>
                            <summary>
                                <a class="tree-item" href="/managementhtml/management.html" target="myIframe">用户管理</a>
                            </summary>
                        </details>
                    </details>

                    <details>
                        <summary>
                            <span class="tree-item">个人信息管理</span>
                        </summary>
                        <details>
                            <summary>
                                <a class="tree-item" href="../userhtml/updatePwd.html" target="myIframe">修改密码</a>
                            </summary>
                        </details>
                    </details>
                </details>
            </div>
            <iframe  name="myIframe"></iframe>
            
        </div>
       
    </div>

</body>
<script src="/js/axios.min.js"></script>
<script src="/js/query.js"></script>
<script src="/homehtml/js/homePage.js"></script>

</html>